<template>
	<div id="pay_footer">
		<p>
			<input type="radio" name="choose" id="money" v-model="deductible" value="1"> 
			<label for="money"></label> 
			<label for="money">￥{{price}}</label>
		</p>
		<p v-if="discountPrice!=0">
			<input type="radio" name="choose" id="partMoney" v-model="deductible" value="2">
			<label for="partMoney"></label>
			<label for="partMoney">￥{{discountPrice}}+{{discountPoint}}积分</label>
		</p>
		<p class="fr pay" @click="$emit('pay')">去付款</p>
	</div>
</template>
<script>
export default{
	name:'PayFooter',
	data(){
		return{
			deductible:1,
			discountPrice:'',
			discountPoint:''
		}
	},
	watch:{
		"deductible":function(val){
			console.log('支付type',val);
			window.localStorage['deductible'] = val;
		}
	},
	created(){
		window.localStorage['deductible'] = this.deductible;
		this.discountPrice = window.localStorage['discountPrice'];
		this.discountPoint = window.localStorage['discountPoint'];
	},
	props: ['price'],
}
</script>
<style lang='less' scoped>
	#pay_footer{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1.44rem;
		line-height: 1.44rem;
		font-size: .42rem;
		padding-left: .4rem;
		background: #fff;
		display: flex;
		justify-content: space-between;
		.pay{
			width: 3.2rem;
			background: #fb4a4a;
			color: #fff;
			text-align: center;
		}
		input[type='radio']{
			display: none;
		}
		input[type='radio']+label{
			display: inline-block;
			width: .3rem;
			height: .3rem;
			border: .01rem solid gray;
			border-radius: 50%;
			background: #fff;
		}
		input[type='radio']:checked+label{
			background: #fb4a4a;
			border-color: #fb4a4a;
		}
	}
</style>